<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
  
<body>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <form action="{$action}" method="post">
            <div class="form-group">
              <label for="example-text-input">角色名称</label>
              <input class="form-control" type="text" name="name" value="{$info.name}" placeholder="角色名称">
            </div>
            <div class="form-group">
              <label for="example-text-input">备注</label>
              <input class="form-control" type="text" name="remark" value="{$info.remark}" placeholder="备注">
            </div>
            <div class="mb-3 col-md-12">
              <label for="status" class="form-label">状态</label>
              <div class="clearfix">
                <div class="form-check form-check-inline">
                  <input type="radio" id="status" name="status" class="form-check-input" value="1" {if $info.status == 1}checked{/if}>
                  <label class="form-check-label" for="status">启用</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" id="status" name="status" class="form-check-input" value="0" {if $info.status == 0}checked{/if}>
                  <label class="form-check-label" for="status">禁用</label>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="check-all">
                        <label class="form-check-label" for="check-all">全选</label>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {volist name="tree_menu" id="v"}
                  <tr>
                    <td>
                      <div class="form-check">
                        <input class="form-check-input checkbox-parent" type="checkbox" name="rules[]" id="roleid-{$v.id}" dataid="id-{$v.id}" value="{$v.id}" {in name="$v.id" value="$info.rules"}checked{/in}>
                        <i class="{$v.icon}"></i>
                        <label class="form-check-label" for="roleid-{$v.id}">{$v.title}</label>
                      </div>
                    </td>
                  </tr>
                  {volist name="v.second" id="v2"}
                  <tr>
                    <td class="ps-lg-4">
                      <div class="form-check">
                        <input class="form-check-input checkbox-child" type="checkbox" name="rules[]" id="roleid-{$v.id}-{$v2.id}" dataid="id-{$v.id}-{$v2.id}" value="{$v2.id}" {in name="$v2.id" value="$info.rules"}checked{/in}>
                        <i class="{$v2.icon}"></i>
                        <label class="form-check-label" for="roleid-{$v.id}-{$v2.id}">{$v2.title}</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ps-lg-5">
                      {volist name="v2.auth" id="v3"}
                      <div class="form-check">
                        <input class="form-check-input checkbox-child" type="checkbox" name="rules[]" id="roleid-{$v.id}-{$v2.id}-{$v3.id}" dataid="id-{$v.id}-{$v2.id}-{$v3.id}" value="{$v3.id}" {in name="$v3.id" value="$info.rules"}checked{/in}>
                        <label class="form-check-label" for="roleid-{$v.id}-{$v2.id}-{$v3.id}">{$v3.title}</label>
                      </div>
                      {/volist}
                    </td>
                  </tr>
                  {/volist}
                  {/volist}
                </tbody>
              </table>
              <input type="hidden" name="id" value="{$info.id}">
              <input type="hidden" id="jump_url" value="{$action}">
              
              <div class="mb-3 col-md-12">
              <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
              <button type="button" class="btn btn-default" id="close_layer_open">返 回</button>
            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
        
  </div>
  
</div>
{include file="public/script"}

<script type="text/javascript">
$(function(){
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function(){
        var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
    });
    $('input.checkbox-child').on('change', function(){
        var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if($(this).is(':checked')){
            parent.prop('checked', true);
            //循环到顶级
            while(dataid.lastIndexOf("-") != 2){
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        }else{
            //父级
            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                parent.prop('checked', false);
                //循环到顶级
                while(dataid.lastIndexOf("-") != 2){
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                    }
                }
            }
        }
    });
});
</script>
</body>
</html>